<template>
  <div class="submit">
    <div class="submit_out" style="height: 1000px;">
      <div style="height:200px;width:100%;">
        <el-tabs class="submit_tabs"
        v-model="activeName" @tab-click="handleClick" stretch>
          <el-tab-pane label="文件上传" name="first">
           <el-upload
              class="upload-demo"
              :drag="true"
              action="#"
              :before-upload="handleUpload"
              :file-list="fileList"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :on-error="handleError">
              <div class="submit_div" style="position: relative;
              width: 100%;">
              <div class="drag-area">
                <div class="icon"><i style="color: #9ab8ee;" class="el-icon-upload"></i></div>
                <header>Drag & Drop to Upload File</header>
                <span>OR</span>
                <button>Browse File</button>
              </div>
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane  style="width: 50%; text-align: center; width: 100%;"
           label="互联网上传" name="second">
           <div class="submit_2" style="border:solid;
           text-align: center; height: 455px; border:none">
            <div class="submit_2.1" style="border:dashed; background-color: white;
            border-color:#9ab8ee; height: 49%; width: 648px; margin: auto;
            border-radius: 5px;">
              <!-- 链接 <input type="text"> -->
               <h3>链接上传</h3>
               <el-input v-model="submit_link" placeholder="请输入链接" 
               style="width: 70%;"></el-input><br><br>
               <el-button @click="submitlink()" 
               style="background-color: #9ab8ee; color: black;" >上传</el-button>
            </div>
            <div class="submit_2.1" style="border:dashed; background-color: white;
            border-color:#9ab8ee; height: 49%; width: 650px; margin: auto;
            border-radius: 5px;">
              <!-- 链接 <input type="text"> -->
               <h3>二维码上传</h3>
               <el-upload
                  class="avatar-uploader"
                  action="#"
                  :before-upload="handleUpload"
                  list-type="picture"
                  :file-list="fileList"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  
                  :on-error="handleError">
                  <i  class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
           </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    
    
  </div>
</template>



<script>
import axios from 'axios';

export default {
  data() {
    return {
      fileList: [],
      activeName: 'first',
      submit_link:'',
      submitimg:[],
    };
  },
  methods: {
    submitlink() {
      //加载页面
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
    const file = this.file;
    if (file) { // 如果有链接，创建URL
      axios.post('http://127.0.0.1:8000/apk/post_apk/', { url: file })
      .then(response => {
        //取消加载页面
        loading.close();
        // 处理成功响应
        localStorage.setItem("data",JSON.stringify(response.data))
        var parse = JSON.parse(item);
        this.handleSuccess(response.data, file, this.fileList);
        if(parse["Apk_info_id"]==0){
          this.$router.push({path:"/present/main"})
        } else{
          this.$router.push({path:"/demo/listmain"})
        }
        
      })
      .catch(error => {
        //取消加载页面
        loading.close();
        // 处理错误响应
        this.handleError(error, file, this.fileList);
      });
    } else { // 或者处理二进制数据
      loading.close();
      // ...
      this.$message.error('该链接为空或无效! 请重新输入链接');
      this.submit_link = '';
    }
  },
    handleUpload(file) {
      //加载页面
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append('file', file);

      // 发送 POST 请求
      axios.post('http://127.0.0.1:8000/apk/upload/apks', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(response => {
        //取消加载页面
        loading.close();
        // 处理成功响应
        localStorage.setItem("data",JSON.stringify(response.data))
        var parse = JSON.parse(item);
        this.handleSuccess(response.data, file, this.fileList);
        if(parse["Apk_info_id"]==0){
          this.$router.push({path:"/present/main"})
        } else{
          this.$router.push({path:"/demo/listmain"})
        }
      })
      .catch(error => {
        //取消加载页面
        loading.close();
        // 处理错误响应
        this.handleError(error, file, this.fileList);
      });
      
      // 阻止默认上传行为
      return false;
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleSuccess(response, file, fileList) {
      this.$message.success('上传成功');
      this.fileList.push(file);
    },
    handleError(error, file, fileList) {
      this.$message.error('上传失败');
    },
    handleClick(tab, event) {
        console.log(tab, event);
      },
  },
};
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 3px dashed black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: black;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    background: #9ab8ee;
    color: black;
    width: 138px;
    height: 138px;
    line-height: 138px;
    text-align: center;
  }
  .avatar {
    width: 138px;
    height: 138px;
    display: block;
  }

::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}
::v-deep .el-tabs__nav-scroll{
  width: 32%!important;
  margin: 160px auto 5px!important;
}

.upload-demo  >>> .el-upload-dragger {
  position: relative;
  /* top: 200px ; */
  width: 650px !important;
  height: 450px !important;
  border: 3px dashed #9ab8ee;
  transition: border-color 0.3s;
}
/* ::v-deep .el-tabs__content {
  background-color: #367cff;
} */
.upload-demo  >>> .el-upload-dragger:hover {
  border-color: #367cff;
}
.upload-demo {
  /* height: 100%; */
  position: relative;
  /* top: 200px; */
  height: 700px;
}
.submit {
  width: 100%;
  height: 870px;
  position: relative;
}
/deep/.el-upload--text{
  height: 0;
}

.submit_div{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45vh;
  /* background: #5256ad; */
}

.drag-area{
  border: 0px dashed #b4c9ef;
  height: 440px;
  width: 650px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.drag-area.active {
  border: 2px solid #b4c9ef;
}
.drag-area .icon{
  font-size: 100px;
  color:#b4c9ef;
}
.drag-area header{
  font-size: 30px;
  font-weight: 500;
  color: #b4c9ef;
}
.drag-area span{
  font-size: 25px;
  font-weight: 500;
  color: #b4c9ef;
  margin: 10px 0 15px 0;
}
.drag-area button{
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  background: #b4c9ef;
  border-radius: 5px;
  cursor: pointer;
}
</style>
